<template>
	<div>
		<div class="news_lie">
			<div class="pb_hader">
				<p>
					<span class="lt_span">{{casename}}</span>
					<a class="rg_a"><span>首页</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>案例展示</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="rg_sp">{{casename}}</span></a>
				</p>
			</div>
			<div class="case">
				<ul>
					<li v-for="(item,index) in caselist" :key="index">
						<div class="dian">
							<img src="../../assets/images/dian.png">
						</div>
						<div class="case_nr">
							<div class="tu fancybox1" data-fancybox-group="gallery" href="../../assets/images/ws_tu.png" title="污水处理精品案例">
								<img class="zs" :src="item.caseimg">
								<div class="dt">
									<img class="datu" :src="item.case_dtimg">
								</div>
							</div>
							<div class="zi">
								<span>{{item.casenr}}</span>
								<p>{{item.casexq}}</p>
							</div>
						</div>
					</li>
				</ul>
				<el-pagination 
				  background
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="querytInfo.pagenum"
				  layout="prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				casename:'工业污水',
				caselist:[{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				},{
					caseimg:require('../../assets/images/ws_tu.png'),
					case_dtimg:require('../../assets/images/datu.png'),
					casenr:'污水处理精品装备污水处理的那就算了点金老师...',
					casexq:'污水处理精品装备污水处理三打两建少年锦时...'
				}],
				
				casenamelist:['工业污水','市政污水','黑臭水体','农村连线','污流截污'],
				
				querytInfo: {
				  query: '',
				  // 当前页数
				  pagenum: 1,
				  // 总条数
				  pagesize: 2
				},
				total: 8,
				caseid: ''
			}
		},
		mounted() {
			this.caseid = this.$route.params.id
		},
		methods: {
			// 监听psgesize 改变
			handleSizeChange(newsize) {
				// console.log(newsize);
				this.querytInfo.pagesize = newsize
			},
			// 监听 页码值 改变
			handleCurrentChange(newpage) {
				// console.log(newpage);
				this.querytInfo.pagenum = newpage
			},
		},
		// 监听路由变化，操作数据更新
		watch: {
			$route(to, from) {
				this.caseid = this.$route.params.id
				this.casename = this.casenamelist[this.caseid-1]
				// this.$HTTP.get('', {
				// 	params: ''
				// })
				// .then((res) => {
				// 	// this.newslist = res
				// 	// this.total = res.total
				// })
				// .catch((error) => {
				// 	console.log(error)
				// })
			}
		}
	}
</script>

<style scoped>
	.news_lie {
		width: 100%;
		height: auto;
		border: 1px solid #EEEEEE;
		float: left;
		box-sizing: border-box;
	}

	.pb_hader {
		width: 100%;
		height: auto;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: none;
		background: #fff;
	}

	.pb_hader p {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}

	.pb_hader p .lt_span {
		border-left: 4px solid #0069b1;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		padding: 0 12px;
		color: #1f2f3a;
	}

	.pb_hader p .rg_a {
		display: inline-block;
		float: right;
		font-size: 14px;
		color: #b3b2b2;
		margin-left: 5px;
	}

	.pb_hader p .rg_a .rg_sp {
		color: #7c7c7c;
	}

	.pb_center {
		width: 100%;
		height: auto;
	}

	.case {
		width: 100%;
		height: auto;
		float: left;
		padding: 20px 20px;
		box-sizing: border-box;
	}

	.case ul {
		float: left;
		width: 100%;
	}

	.case ul li {
		position: relative;
		width: 33.3%;
		border-right: 1px solid #dcdcdc;
		border-bottom: 1px solid #dcdcdc;
		height: auto;
		min-height: 100px;
		float: left;
		box-sizing: border-box;
	}
	.case ul li:nth-child(3n){
		border-right: 0;
	}
	.case ul li .dian {
		width: auto;
		position: absolute;
		bottom: -9px;
		right: -6px;
		z-index: 1;
	}

	.case ul li .case_nr {
		width: 90%;
		padding: 5%;
		float: left;
	}

	.case_nr .tu {
		width: 100%;
		padding: 5%;
		position: relative;
		border: 1px solid #dcdcdc;
		float: left;
		box-sizing: border-box;
	}

	.tu .dt {
		position: absolute;
		background: rgba(0, 105, 177, 0.2);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0;
		cursor: pointer;
	}

	.dt img {
		margin-top: 80px;
		margin-left: 120px;
		float: left;
	}

	.tu .zs {
		width: 100%;
		height: 100%;
		float: left;
	}

	.case_nr .zi {
		width: 100%;
		height: auto;
		float: left;
	}

	.zi {
		width: 60%;
		height: auto;
		float: left;
	}

	.zi span {
		float: left;
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		display: block;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.zi p {
		float: left;
		width: 100%;
		font-size: 14px;
		color: #cecece;
		hegiht: 20px;
		line-height: 20px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10px;
	}
	.el-pagination{
		width: 100%;
		margin-top:20px;
		text-align: center;
		float: left;
	}
</style>
